<template>
    <div class="user-bind-card-verified">
        <ul class="steps">
            <li class="steps__item active">
                <span>1</span>
                <p>实名认证</p>
            </li>
            <li class="steps__item active">
                <span>2</span>
                <p>银行卡认证</p>
            </li>
            <li class="steps__item active">
                <span>3</span>
                <p>设置交易密码</p>
            </li>
        </ul>

        <ul class="form-box">
            <li class="form__item detail">
                <span class="form__key">交易密码</span>
                <div class="form__value">
                    <input v-model='newPassword' type="password" placeholder="请输入6位数字密码">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">确认交易密码</span>
                <div class="form__value">
                    <input v-model='confirmPassword' type="password" placeholder="请再次输入交易密码">
                </div>
            </li>
        </ul>
        <!-- <ul class="form-box">
            <li class="form__item detail">
                <span class="form__key">验证码</span>
                <div class="form__value">
                    <input v-model='smsCode' type="tel" placeholder="请输入">
                </div>
            </li>
        </ul>
        <verification-code v-model='sent' @click='getCode'></verification-code> -->

        <div class="bind-card-button" @click='setPassword'>
            <span class="button long">确定</span>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userBindCardTransactionPasswordValidation } from '../validation/validation'
    import { userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            verificationCode
        },
        data() {
            return {
                sent:false,
                smsCode:'',
                mobile:'',
                newPassword:'',
                confirmPassword:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ])
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function
            goSuccess(){
                this.$router.push({
                    name:'user-bind-card-success'
                })
            },
            getCode(){
                this.sent = true
                this.showLoading()

                userApi.sendSms({
                    mobile:this.mobile,
                    type:'SET_TRADE_PASSWORD'
                })
                .then(result=>{
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.hideLoading()
                })
            },
            getInfo(){
                this.showLoading()
                userApi.getInfo()
                .then(result=>{
                    this.hideLoading()
                    this.mobile = result.user.mobile
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            setPassword(){
                let params = {
                    smsCode:this.smsCode,
                    newPassword:this.newPassword,
                    confirmPassword:this.confirmPassword,
                }
                if(!userBindCardTransactionPasswordValidation(params)) return

                this.showLoading()
                userApi.setTradePassword(params)
                .then(result=>{
                    this.goSuccess()
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
        },
        created(){
            
            this.getInfo()

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-bind-card-verified{
    }

</style>
